<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div v-if="formData">
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData.userName }}
          </span>
          <el-tag size="small" style="margin-right: 15px" type="warning">
            {{ getLabel('confirmStatus', formData?.confirmStatus) }}
          </el-tag>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button
          v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:change'],bool:formData?.confirmStatus === '0'}"
          size="small" type="primary" @click="handlEdit(1)">
          变更信息
        </el-button>
        <!-- <template v-if="formData">

          <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:delete'], 
            bool:formData?.agentStatus === '-1' || formData?.agentStatus === '-5'}" size="small" type="primary"
                     @click="handlDelete">
            删除
          </el-button>

          <template v-if="Number(formData?.agentStatus) > 1  ">
            <template
                v-if="formData.flowStatus !== 'DOING' || formData.flowStatus === 'REPEAL' || formData.flowStatus === 'REJECT_INITIATOR'">
              <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:change']}" size="small"
                         type="primary" @click="handlEdit(1)">
                变更信息
              </el-button>
            </template>
          </template>

          <template v-else>
            <el-button v-auth="{v:['crm:marketing:cooperationInformation:partTimeBigBag:change'],
              bool:formData?.agentStatus === '-1' ||  formData?.agentStatus === '-6' }" size="small" type="primary"
                       @click="handlEdit(2)">
              编辑
            </el-button>
          </template>

        </template> -->
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px">
      <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="8" :xs="4">
            <el-form-item label="兼职编号：">
              <span>{{ formData.agentNumber }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xs="4">
            <el-form-item label="详细地址：">
              <span>{{ formData.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content" style="margin-top: 20px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="1">
          <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="100px" size="small">
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <el-col :span="24" style="padding-left: 0;padding-right: 0">
                <item-title title="基本信息" />
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="兼职人员姓名：" label-width="140px">
                  <span>{{ formData?.userName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item class="item_col" label="性别：">
                  <span v-if="formData?.sex === '1'">男</span>
                  <span v-if="formData?.sex === '2'">女</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="联系电话：">
                  <span>{{ formData?.tel }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="身份证：">
                  <span>{{ formData?.cardNumber }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建人：">
                  <span>{{ formData?.creatorName }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :xs="4">
                <el-form-item label="创建时间：">
                  <span> {{ dateFormat("yyyy-mm-dd HH:MM:SS", formData?.createdAt) }}</span>
                </el-form-item>
              </el-col>
              <el-col :lg="24" :xs="4">
                <el-form-item label="身份证附件：">
                  <div v-for="(item,index) in formData?.cardFiles" :key="index" class="file-item">
                    <image-upload-view :data="item" disabled="true" />
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane v-if="formData.agentStatus !== '1'" label="兼职合同" name="2">
          <contract ref="contractRef" :contract-data="contractData" />
        </el-tab-pane>
        <el-tab-pane label="跟进记录" name="3">
          <followUp v-if="activeName === '3'" :objectId="formData?.id" customerType="1" />
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="4">
          <operation-view mode="agent" />
        </el-tab-pane>
      </el-tabs>

    </div>

    <!--新建潜在代理商 -->
    <form-personnel ref="formPersonnelRef" agent-type="agent_person" @succsess="succsess" />

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";

export default {
  name: "Potential",
  components: {
    formPersonnel: defineAsyncComponent(() =>
      import("../modules/partTimeBigBag/formPersonnel.vue")
    ),
    contract: defineAsyncComponent(() =>
      import("@CRM/views/commonView/contract/contract.vue")
    ),
    followUp:defineAsyncComponent(()=>
    import("@CRM/views/marketing/customer/modules/followUp.vue"))
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      formData: {},
      activeName: "1",
      contractRef: null,
      formPersonnelRef: null,
      contractData: {
        id: Number(route.query.id),
        name: "",
        contractType: "agent",
        contractObjectType: "agent_person",
        title: "兼职合同详情",
        disabled: true,
        pms: [
          "crm:marketing:cooperationInformation:partTimeBigBag:contract:all",
        ],
      },
    });

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetail = (id) => {
      api.channelAgent.POTENTIALAGENT_DETAIL(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
          data.contractData.name = res.data.data.userName;
        }
      });
    };

    const handlEdit = (num) => {
      data.formPersonnelRef.open(route.query.id, 2, num);
    };

    const handlDelete = (id) => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.channelAgent.POTENTIALAGENT_DELETE_LIST(id).then((res) => {
            if (res.code === 0) {
              handlBack();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    onMounted(() => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handlBack,
      handlDetail,
      handlDelete,
      handlEdit,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>